<template>
    <!-- 会员权益 -->
    <div class="recharge">
        <div class="w">
            <div class="rechargeImg">
                <div>
                    <div class="rechargeable">充值更多 <span>优惠多多</span></div>
                    <div class="member">成为会员，享受更多独家优惠与特权</div>
                    <div class="button">立即充值</div>
                </div>
                <div></div>
            </div>
        </div>
    </div>
    <div class="rech_table">
        <Table />
    </div>
</template>
<script setup>
import Table from './compent/table/index.vue'

</script>
<style lang="scss">
.w {
    width: 75vw;
    margin: 0 auto;
}

.rech_table {
    background-color: #F6F6F6;
}

.recharge {
    height: 18.75vw;
    background: url('@/assets/img/header/hycz.png') no-repeat;
    background-size: 107vw 18.75vw;
    background-color: #F6F6F6;
    overflow: hidden;

    .rechargeImg {
        display: flex;
        justify-content: space-between;
        height: 18.75vw;
        color: #FFFFFF;

        .rechargeable {
            margin-top: 76px;
            font-size: 40px;
            font-family: HYLingXinJ;
            font-weight: 400;
        }

        .member {
            margin-top: 20px;
            font-size: 22px;
            font-family: Source Han Sans CN;
        }

        .button {
            width: 130px;
            height: 36px;
            background: linear-gradient(180deg, #FFDFB6 0%, #C66403 100%);
            margin-top: 30px;
            border-radius: 50px;
            text-align: center;
            line-height: 36px;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: bold;
        }
    }
}
</style>